<template>
  <div :class="[ 'fccc' , 'titletime']" :style="linglongstyleses">
    <div class="timediv" :style="timestyles">{{time}}</div>
    <div class="ymddiv" :style="ymdstyles">{{ymd}}</div>
  </div>
</template>
<script>
import dayjs from "dayjs";

import titlemixins from "@/mixins/bigScreen/titlemixins";

export default {
  name: "titletimelinglong",
  mixins: [titlemixins],
  components: {},
  data() {
    return {
      time: "test",
      ymd: "test"
    };
  },
  computed: {
    linglongstyleses() {
      return {};
    },
    timestyles() {
      return {
        fontSize: this.$root.setting.scale * 85 + "px"
      };
    },
    ymdstyles() {
      return {
        fontSize: this.$root.setting.scale * 35 + "px",
        color: "#50C9FF"
      };
    }
  },
  watch: {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      setInterval(() => {
        let aWeekTxt = [
          "周日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "周六"
        ];

        let week = aWeekTxt[Number(dayjs().format("d"))];
        this.ymd = dayjs().format("YYYY年MM月DD日 ");
        this.time = dayjs().format(" HH:mm:ss");
      }, 1000);
    }
  }
};
</script>
<style lang='scss' scoped>
.timediv {
  font-family: DS-Digital;
  /*font-size:70px;*/
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
</style>